<template>
  <div class="group-list">
    <el-card class="box-card">
      <!--新增弹窗-->

      <!-- 新增   input -->
      <div class="flex jc-sb">
        <Groupbox @aa="dialogFormVisible" />
        <New @Newww="changeNew" />
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="groupName" label="群组名称" width="180" />
        <el-table-column prop="nodeNums" label="传感器节点数量" width="180" />
        <el-table-column prop="onlineNums" label="在线设备数量" />
        <el-table-column
          prop="cTime"
          label="创建时间"
          :formatter="utils.fcTime"
        />
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <!-- 编辑 -->
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              :icon="Delete"
              circle
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="paging flex jc-c bg-fff">
      <el-pagination
        @current-change="changpaging"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
      />
    </div>
    <!-- 編輯 -->
    <el-dialog v-model="show" title="群组重命名">
      <el-form :model="form">
        <el-form-item label="" label-width="140px">
          <el-input v-model="form.groupName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="groupAdd"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>



<script setup>
import { ref, onMounted, reactive, inject } from "vue";
import * as api from "../../api/index.js";
import { Delete, Edit } from "@element-plus/icons-vue"; //图标编辑
import Groupbox from "./group/groupbox.vue";
import New from "./group/new.vue";

//格式化时间
const utils = inject("utils");
//编辑

//删除
const handleDelete = (index, row) => {
  // console.log("index", index);
  // console.log("rowid", row);
  let data = {
    id: row.id,
  };
  api.$groupDel(data).then((res) => {
    console.log("res", res);
    tableData.value.splice(index, 1);
  });
};

//编辑
const form = reactive({
  type: [],
  id: "",
  groupName: "",
});
// const show = ref(false);
const handleEdit = (index, row) => {
  console.log("index", index);
  console.log("rowid", row);
  form.groupName = row.groupName;
  form.id = row.id;
  form.index = index;
  show.value = true;
};
//編輯
const groupAdd = () => {
  let data = {
    groupName: form.groupName,
    id: form.id,
  };
  console.log(222, data);
  api.$groupEdit(data).then((res) => {
    console.log(res);
    show.value = false;
    // groupList();
    let index = form.index;
    tableData.value[index].groupName = form.groupName;
  });
};

//新增
const show = ref(false);

const tableData = ref([]);

//全局变量,方便使用方法内的东西
//组件输入框
const aa = ref("");
//新增按钮功能
const namee = ref("");
// 输入框查找
const dialogFormVisible = (num) => {
  aa.value = num.keyword;

  groupList();
  // console.log(num);
};

//新增功能
const changeNew = (name) => {
  namee.value = name;

  let data = {
    groupName: namee.value.username,
  };
  api.$groupAdd(data).then((res) => {
    let aa = {
      ...res.data,
      onlineNums: "0",
      nodeNums: "0",
    };
    tableData.value.unshift(aa);
  });
};

//分页需要的数据
const pageSize = ref(5);
const total = ref(10);
const currPage = ref(1);
//添加信息
//渲染列表
const groupList = () => {
  let data = {
    currPage: currPage.value,
    pageSize: pageSize.value,
    keyword: aa.value,
  };
  // console.log(1111, data);
  api.$groupList(data).then((res) => {
    // console.log(res, 11111111111111);
    tableData.value = res.data;
    total.value = res.total;
  });
};

//切换分页
const changpaging = (num) => {
  console.log(num);
  currPage.value = num;
  groupList();
};
onMounted(() => {
  groupList();
});
</script>


<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 99%;
}
/* 新增 */
.dialog-footer button:first-child {
  margin-right: 10px;
}
/* 編輯 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
